<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>The CheckBox Tree and Tree Styling</title>
		<style type="text/css">
			@import "../../../dijit/themes/claro/claro.css";
			@import "../../../dijit/themes/claro/document.css";
			@import "../../../dijit/tests/css/dijitTests.css";
			@import "../../themes/claro/claro.css";
		</style>

		<script type="text/javascript">
			var dojoConfig = {
						async: true,
						parseOnLoad: true,
						isDebug: false,
						baseUrl: "../../../",
						packages: [
							{ name: "dojo",	location: "dojo" },
							{ name: "dijit", location: "dijit" },
							{ name: "cbtree",location: "cbtree" }
						]
			};
		</script>

		<script type="text/javascript" src="../../../dojo/dojo.js"></script>
		<script type="text/javascript">
			require([
				"dojo/store/Memory",
				"dojo/store/Observable",
				"dojo/ready",
				"dojo/on",
				"cbtree/Tree",								   // Checkbox tree
				"cbtree/extensions/TreeStyling", // Tree styling extensions
				"cbtree/model/TreeStoreModel"	   // ObjectStoreModel
				], function( Memory, Observable, ready, on, Tree, TreeStyling, ObjectStoreModel) {

					var store, model, tree;
					var data = [
							{ id: "earth", name:"The earth", type:"planet", population: "6 billion"},
							{ id: "AF", name:"Africa", type:"continent", population:"900 million", area: "30,221,532 sq km",
									timezone: "-1 UTC to +4 UTC", parent: "earth"},
								{ id: "EG", name:"Egypt", type:"country", parent: "AF" },
								{ id: "KE", name:"Kenya", type:"country", parent: "AF" },
									{ id: "Nairobi", name:"Nairobi", type:"city", parent: "KE" },
									{ id: "Mombasa", name:"Mombasa", type:"city", parent: "KE" },
								{ id: "SD", name:"Sudan", type:"country", parent: "AF" },
									{ id: "Khartoum", name:"Khartoum", type:"city", parent: "SD" },
							{ id: "AS", name:"Asia", type:"continent", parent: "earth" },
								{ id: "CN", name:"China", type:"country", parent: "AS" },
								{ id: "IN", name:"India", type:"country", parent: "AS" },
								{ id: "RU", name:"Russia", type:"country", parent: "AS" },
								{ id: "MN", name:"Mongolia", type:"country", parent: "AS" },
							{ id: "OC", name:"Oceania", type:"continent", population:"21 million", parent: "earth"},
								{ id: "AU", name:"Australia", type:"country", population:"21 million", parent: "OC"},
							{ id: "EU", name:"Europe", type:"continent", parent: "earth" },
								{ id: "DE", name:"Germany", type:"country", parent: "EU" },
								{ id: "FR", name:"France", type:"country", parent: "EU" },
								{ id: "ES", name:"Spain", type:"country", parent: "EU" },
								{ id: "IT", name:"Italy", type:"country", parent: "EU" }
							];

					function checkBoxClicked( item, nodeWidget, evt ) {
						var newState = nodeWidget.get("checked" );
						var label    = this.model.getLabel(item);

						if( newState ) {
							tree.set("iconStyle", {border:"solid"}, item );
							tree.set("labelStyle",{color:"red"}, item );
						} else {
							tree.set("iconStyle", {border:"none"}, item );
							tree.set("labelStyle",{color:"black"}, item );
						}
						alert( "The new state for " + label + " is: " + newState );
					}

					var store = Observable( new Memory( { data: data }));
					var model = new ObjectStoreModel( { store: store,
																							 query: {id: "earth"},
																							 rootLabel: "The Earth",
																							 checkedRoot: true
																						 });

					ready(function() {
						tree = new Tree( {
										model: model,
										id: "tree02",
										branchReadOnly: false,
										branchIcons: true,
										nodeIcons: true
										}, "CheckboxTree" );
						// Establish listener and start the tree.
						tree.on( "checkBoxClick", checkBoxClicked );
						tree.startup();
					});
				});
		</script>

	</head>

	<body class="claro">
		<h1 class="DemoTitle">The CheckBox Tree and Tree Styling</h1>
		<p>
			A basic CheckBox Tree and <u>observable</u> dojo/store Memory Store demonstrating some tree styling features.
		</p>
		<div id="CheckboxTree">
		</div>
		<h2>Click a checkbox</h2>
	</body>
</html>